import { onMounted, reactive } from 'vue'
import axios from 'axios'

// 需要定义一个函数并暴漏出去，其中函数名称可以省略，代表的是无名函数
export default function useDog() {
  // 狗狗列表
  let dogList = reactive(['https://images.dog.ceo/breeds/pembroke/n02113023_11091.jpg'])

  // // 方法
  async function getDog() {
    try {
      // 此处使用了await，上面就要结合async配合使用。比直接使用then、catch更加优雅
      let res = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
      if (res.data.status === 'success') {
        dogList.push(res.data.message)
      }
    } catch (error) {
      alert(error)
    }
  }

  // function getDog() {
  //   axios
  //     .get('https://dog.ceo/api/breed/pembroke/images/random')
  //     .then((res) => {
  //       console.log(res.data)
  //       if (res.data.status === 'success') {
  //         dogList.push(res.data.message)
  //       }
  //     })
  //     .catch((err) => {
  //       console.log(err)
  //     })
  // }

  // 挂载完毕，上来就获取一个狗狗
  onMounted(() => {
    getDog()
  })

  // 向外部提供东西，否则引用的时候找不到对象和方法
  return {
    getDog,
    dogList,
  }
}
